{include file="common:head" /}
<style type="text/css">
    .car-video-center .car-video-content > h3 {
        margin: 9px 0;
        padding-left: 5px;
        border-left: 5px solid rgb(24, 128, 216);
    }

    .car-video-center .car-video-content .title .title-list {
        float: left;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding: 0 5px;
        margin: 0 5px;
    }

    .car-video-center .car-video-content .title .title-list.active {
        color: rgb(0, 117, 216);
        border-bottom: 1px solid rgb(0, 117, 216);
    }

    .car-video-center .car-video-content .sTitle .title-list.active{
        color: rgb(0, 117, 216);
        border-bottom: 1px solid rgb(0, 117, 216);
    }

    .car-video-center .car-video-content .sTitle li {
        float: left;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
    }

    .all-video .video-list {
        display: inline-block;
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }

    .all-video .video-list:nth-child(odd) {
        margin-right: 15px;
    }

    .all-video .video-list .img-box {
        width: 100%;
        height: 90px;
        overflow: hidden;
    }

    .all-video .video-list .img-box img {
        width: 100%;
        height: 90px;
    }

    .all-video .video-list .descipe {
        color: rgb(147, 109, 78);
    }

    .appoint-car-tan {
        position: fixed;
        top: 20%;
        left: 10%;
        width: calc(90% - 40px);
        text-align: center;
        background-image:url(/static/move/img/bgm.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .appoint-car-tan .close-appoint {
        height: 36px;
        line-height: 32px;
        text-align: right;
        font-size: 26px;
        color: #FFFFFF;
    }

    .appoint-car-tan .appoint-tan-content {
        padding-bottom: 20px;
        background-color: #ededed;
    }

    .appoint-car-tan .appoint-tan-content > h2 {
        height: 50px;
        line-height: 50px;
        color: #007AFF;
    }

    .appoint-car-tan .appoint-tan-content .appoint-tan-all .appoint-tan-list {
        margin-bottom: 10px;
        text-align: left;
    }

    .appoint-car-tan .appoint-tan-content .appoint-tan-all .appoint-tan-left {
        width: 36px;
        line-height: 30px;
    }

    .appoint-car-tan .appoint-tan-content .appoint-tan-all input {
        width: calc(100% - 42px);
        height: 30px;
        margin-left: 6px;
        padding-left: 8px;
    }

    .appoint-car-tan .appoint-tan-content .appoint-tan-all .appoint-likecar .fl {
        width: 50%;
        line-height: 34px;
        padding-left: 8px;
    }

    .appoint-car-tan .appoint-tan-content .appoint-tan-all .appoint-likecar .fl input {
        float: left;
        width: 10px;
        margin-top: 2px;
    }

    .appoint-car-tan .appoint-tan-content .appoint-tan-all .nowSend {
        width: 100px;
        height: 36px;
        line-height: 36px;
        margin: 0 auto;
        background-color: #1880d8;
        color: #FFFFFF;
    }
</style>
<body>

{include file="common:header" /}

<div class="index-content">
    <div class="all-content car-video-center">
        <div class="car-video-content padd12">
            <h3>视频广场</h3>
            <div class="title clearfix">
                <div class="title-list {catId==0 ? 'active' : ''}">全部</div>
                {volist name="cate_list" id="item"}
                <div class="title-list {if $item.id eq $cat_id} active {else/}''{/if}" onclick="openwin('{:url(\'move/appoint/index\')}' + '?cate_id=' + {$item.id})">{$item.name}</div>
                {/volist}

            </div>

            <ul class="sTitle clearfix">
                <li class="title-list {if $zuixin eq true} active {else/}''{/if}" onclick="openwin('{:url(\'move/appoint/index\')}' + '?zuixin=true')">最新发布</li>
                <li class="title-list {if $zuiduo eq true} active {else/}''{/if}" onclick="openwin('{:url(\'move/appoint/index\')}' + '?zuiduo=true')">更多播放</li>
                <li class="title-list {if $haoche eq true} active {else/}''{/if}" onclick="openwin('{:url(\'move/appoint/index\')}' + '?haoche=true')">好车推荐</li>

            </ul>
            <div class="all-video clearfix">
                {volist name="video_list" id="item"}
                <div class="video-list">
                    <div class="img-box">
                        <img src="{$item.image}"/>
                    </div>
                    <h4 class="title oneline">{$item.title}</h4>
<!--                    <p class="descipe oneline">{$item.desc|default="简介"}</p>-->
                </div>
                {/volist}

            </div>
        </div>

        <!-- 预约试驾弹框 -->
        <div class="appoint-car-tan" >
            <div class="close-appoint padd12">—</div>
            <div class="appoint-tan-content padd12">
                <h2>预约试驾</h2>
                <div class="appoint-tan-all">
                    <form action="{:url('move/appoint/create')}" method="post">

                    <div class="appoint-tan-list clearfix">
                        <div class="fl appoint-tan-left">姓名:</div>
                        <input class="fl" type="text" placeholder="例如:王先生" name="name" autocomplete="off" required/>
                    </div>
                    <div class="appoint-tan-list clearfix">
                        <div class="fl appoint-tan-left">电话:</div>
                        <input class="fl" type="text" placeholder="已加密" name="phone" autocomplete="off" required/>
                    </div>
                    <div class="appoint-tan-list">
                        <div class="">意向车型（可多选)</div>
                        <div class="clearfix appoint-likecar">
                            {volist name="cate" id="item"}
                            <div class="fl">
                                <input type="checkbox" name="cid[]" class="checkbox" value="{$item.id}" {}/>{$item.name}
                            </div>
                            {/volist}

                        </div>
                    </div>
                    <div class="appoint-tan-list">
                        <div class="">购车周期</div>
                        <div class="clearfix appoint-likecar">
                            {volist name="plan_time" id="item"}
                            <div class="fl">
                                <input type="radio" class="radio" name="play_time" value="{$item.value}"/>{$item.label}
                            </div>
                            {/volist}

                        </div>
                    </div>
                    <div><input class="nowSend" type="submit" value="立即发送"></div>
                    </form>
                </div>
            </div>
        </div>

        {include file="common:footer" /}
    </div>
</div>
<script type="text/javascript" src="__STATIC__/move/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/move/js/swiper.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/common.js"></script>
<script type="text/javascript">

    var cat_id = {$cat_id}
    // var catId=2;
    // $(function () {
    //     a=location.href;
    //     var index = a.indexOf("=");
    //     var catId = a.substring(index+1,a.length);
    //     console.log(catId)
    // })
    $(".title").on("click", ".title-list", function () {
        $(this).addClass("active").siblings().removeClass("active");
    });

    $(".close-appoint").on("click", function () {
        $(".appoint-car-tan").hide()
    });

    $(".sTitle").on("click", ".title-list", function () {
        stopDefault()
        $(this).addClass("active").siblings().removeClass("active");
    });

    var car_name = '';
    var html =  $('.title-list').on('click',function () {
        var car_name = $(this).html();
    });

    //var get_zuixin = '';
    var str1 = ''
    var  str2 = ""
    var str3 = ""

    function  test(params,flag,fields = ""){
        //var str = $(obj).html()

        var param = {};
        if (cat_id != ""){
            str3 = cat_id
        }
        if (flag && fields != ""){
             // str2 = ""
             // str2+=str
            str1 = fields
            str2 =  true
            param[str1] = str2
        }else {
            //str3 = ""
            // str3+=params
            // param.cat_id = str3
            str3 = params
        }
        // var param = {
        //     [str1]:str2,
        //     cat_id:str3
        // }
        console.log(param)
        //openwin("/move/video/video_square?"+ fields +"="+str2 + "&cat_id="+str3)


    }


    $('.appoint-tan-list .checkbox:first').prop('checked','checked');
    $('.appoint-likecar .radio:first').prop('checked','checked');
</script>
</body>
</html>